var date = [
    { number: 1, time: "2020-11-11 15:00", organization: '流调疾控中心', name: '系统', content: '新增了确诊患者' },
    { number: 2, time: "2020-11-11 14:00", organization: '流调疾控中心', name: '张三', content: '登录系统' },
    { number: 3, time: "2020-11-11 13:00", organization: '元和街道/黄桥社区', name: '系统', content: '登录系统' },
    { number: 4, time: "2020-11-11 11:00", organization: '流调疾控中心', name: '李四', content: '新增了确诊患者' },
    { number: 5, time: "2020-11-11 10:00", organization: '元和街道/黄桥社区', name: '王五', content: '登录系统' },
    { number: 6, time: "2020-11-11 9:00", organization: '流调疾控中心', name: '张三', content: '登录系统' },
    { number: 7, time: "2020-11-10 15:00", organization: '元和街道/黄桥社区', name: '系统', content: '新增了确诊患者' },
    { number: 8, time: "2020-11-10 14:00", organization: '流调疾控中心', name: '系统', content: '登录系统' },
    { number: 9, time: "2020-11-10 12:00", organization: '流调疾控中心', name: '刘斌', content: '新增了确诊患者' },
    { number: 10, time: "2020-11-10 10:00", organization: '元和街道/黄桥社区', name: '李红', content: '登录系统' },
    { number: 11, time: "2020-11-10 95:00", organization: '流调疾控中心', name: '李丽', content: '登录系统' },
    { number: 12, time: "2020-11-09 15:00", organization: '元和街道/黄桥社区', name: '李四', content: '新增了确诊患者' },
    { number: 13, time: "2020-11-09 12:00", organization: '流调疾控中心', name: '张三', content: '新增了确诊患者' },
    { number: 14, time: "2020-11-09 10:00", organization: '元和街道/黄桥社区', name: '李红', content: '登录系统' },
    { number: 15, time: "2020-11-08 17:00", organization: '流调疾控中心', name: '李丽', content: '登录系统' },
    { number: 16, time: "2020-11-08 15:00", organization: '元和街道/黄桥社区', name: '系统', content: '新增了确诊患者' },
    { number: 17, time: "2020-11-08 12:00", organization: '元和街道/黄桥社区', name: '李红', content: '登录系统' },
    { number: 18, time: "2020-11-08 10:00", organization: '流调疾控中心', name: '李丽', content: '登录系统' },
    { number: 19, time: "2020-11-08 9:00", organization: '元和街道/黄桥社区', name: '刘斌', content: '新增了确诊患者' },
];
var pag1 = 1;//当前的页码
var coun1 = 8;//每页的条数
var oTBod1 = document.querySelector('tbody');//获取tbody
var OPagination1 = document.querySelector('.pagination')//获取分页容器
var sYy = document.querySelector('.prev')//获取上一页的按钮
var xYy = document.querySelector('.next')//获取下一页的按钮
var oSouSuo = document.querySelector('.souSuok')//获取搜索的输入框1
var oSouSuo2 = document.querySelector('.souSuok2')//获取搜索的输入框2
var oSouSuo3 = document.querySelector('.souSuok3')//获取搜索的输入框3
var oSouSuo4 = document.querySelector('.souSuok4')//获取搜索的输入框4
var chaXun = document.querySelector('.cx')//获取搜索按钮
var chongZhi=document.querySelector('.cz')//获取重置按钮


//页面初始化的渲染功能
function reader1() {
    var str = oSouSuo.value;//查看搜索框1的内容
    var str2 = oSouSuo2.value;//查看搜索框2的内容
    var str3 = oSouSuo3.value;//查看搜索框3的内容
    var str4 = oSouSuo4.value;//查看搜索框4的内容
    var shuJu1=[];
    var shuJu2=[];
    var shuJu3=[];
    var shuJu4=[];//最终用来渲染的;
    //多搜索框方法二
    if (str.trim()=='') {
        shuJu1=date;
    }else{
        shuJu1=date.filter(function (v) {
            if (v.organization.includes(str)) {
                return v;
            }
        })
    }

    if (str2.trim()=='') {
        shuJu2=shuJu1;
    }else{
        shuJu2=shuJu1.filter(function (v) {
            if (v.name.includes(str2)) {
                return v;
            }
        })
    }

    if (str3.trim()=='') {
        shuJu3=shuJu2;
    }else{
        shuJu3=shuJu2.filter(function (v) {
            if (v.time.includes(str3)) {
                return v;
            }
        })
    }

    if (str4.trim()=='') {
        shuJu4=shuJu3;
    }else{
        shuJu4=shuJu3.filter(function (v) {
            if (v.time.includes(str4)) {
                return v;
            }
        })
    }



    // var shuJu = [];//搜索后的数据
    // if (str.trim() == '') {//没有搜索内容，全部都要
    //     shuJu = date; //搜索的就是全部
    // } else {
    //     for (var i = 0; i < date.length; i++) { //有搜索的内容
    //         if (date[i].organization.includes(str)) { //如果每条数据中的名字里面包含搜索的内容
    //             shuJu.push(date[i]); //就把符合条件的内容放进渲染的数据中
    //         }
    //     }
    // }
    // var shuJu2 = [];//第二个搜索框
    // if (str2.trim() != '') {//没有搜索内容，全部都要
    //     for (var i = 0; i < shuJu.length; i++) { //有搜索的内容
    //         if (shuJu[i].name.includes(str2)) { //如果每条数据中的名字里面包含搜索的内容
    //             shuJu2.push(shuJu[i]); //就把符合条件的内容放进渲染的数据中
    //         }
    //     }
    //     shuJu = shuJu2;
    // }
    // var shuJu3 = [];//第三个搜索框
    // if (str3.trim() != '') {//没有搜索内容，全部都要
    //     for (var i = 0; i < shuJu.length; i++) { //有搜索的内容
    //         if (shuJu[i].time.includes(str3)) { //如果每条数据中的名字里面包含搜索的内容
    //             shuJu3.push(shuJu[i]); //就把符合条件的内容放进渲染的数据中
    //         }
    //         shuJu = shuJu3;
    //     }
    // }
    // var shuJu4 = [];//第四个搜索框
    // if (str4.trim() != '') {//没有搜索内容，全部都要
    //     for (var i = 0; i < shuJu.length; i++) { //有搜索的内容
    //         if (shuJu[i].content.includes(str4)) { //如果每条数据中的名字里面包含搜索的内容
    //             shuJu4.push(shuJu[i]); //就把符合条件的内容放进渲染的数据中
    //         }
    //         shuJu = shuJu4;
    //     }
    // }

    oTBod1.innerHTML = '';//让table为空
    var reader1Arr = shuJu4.slice((pag1 - 1) * coun1, pag1 * coun1);//根据count和page准备要渲染的数据
    for (var i = 0; i < reader1Arr.length; i++) {//循环要渲染的数据
        var oTr1 = document.createElement('tr');//创建tr
        oTr1.innerHTML = `
        <td>${reader1Arr[i].number}</td>
        <td>${reader1Arr[i].time}</td>
        <td>${reader1Arr[i].organization}</td>
        <td>${reader1Arr[i].name}</td>
        <td>${reader1Arr[i].content}</td>`; //给tr创建内容
        oTBod1.appendChild(oTr1);//把tr创建到tbody里面
    }
    var apBtn1 = document.querySelectorAll('.pBtn1');//找到所有的1，2，3，4的页码
    for (var i = 0; i < apBtn1.length; i++) {
        OPagination1.removeChild(apBtn1[i].parentNode); //删除所有的页码
    }

    for (var i = 1; i <= Math.ceil(shuJu4.length / coun1); i++) { //根据数据的长度重新创建页码
        var oli = document.createElement('li');//创建li
        oli.innerHTML = `<a class="pBtn1" href="#">${i}</a>`;//给li创建内容
        if (i == pag1) {
            oli.classList.add('active'); //如果li和当前的页码一致，给他加一个选中的class
        }
        OPagination1.insertBefore(oli, OPagination1.lastElementChild); //在下一页的前面插入页码
    }
}
reader1();//一上来就渲染一次数据

OPagination1.addEventListener('click', changePg);//给分页加事件
function changePg() {
    if (event.target.className == 'pBtn1') {//如果当前点击的按钮有pageBtn这个class名字
        pag1 = event.target.innerHTML;//修改全局的page
        reader1();//渲染table，渲染分页
    }
}
//给上一页和下一页加事件
sYy.addEventListener('click', prev1);
xYy.addEventListener('click', next1);
function prev1() {
    if (pag1 > 1) {
        pag1--;
        reader1();
    }
}
function next1() {
    if (pag1 < Math.ceil(date.length / coun1)) {
        pag1++;
        reader1();
    }
}

//搜索
chaXun.addEventListener('click', oSouSuofn);
function oSouSuofn() {
    pag1 = 1;
    reader1();
}


chongZhi.addEventListener('click',chongZhip)
function chongZhip() {
    oSouSuo.value='';
    oSouSuo2.value='';
    oSouSuo3.value='';
    oSouSuo4.value='';
    reader1();
}